const text = document.querySelectorAll(".header .text")
const slider = document.querySelector(".header .slider")
const completed = document.querySelector(".completed")
const topActive = document.querySelector(".topActive")
const topActiveImg = document.querySelector(".topActive img")
const loading = document.querySelector(".loading")
let current = 0
new AlloyFinger(document.body, {
	swipe: function (evt) {
		if (evt.direction == "Down") {
			topActive.style.height = 150 / 37.5 + "rem"
			topActiveImg.style.height = 150 / 37.5 + "rem"
			topActiveImg.style.opacity = 1
			load()
			current == 0 && getLocationData()
		}
		if (evt.direction == "Up") {
			closeActive()
		}
	}
})

// 关闭刷新动画
function closeActive() {
	topActive.style.height = 0
	topActiveImg.style.height = 0
	topActiveImg.style.opacity = 0
}

text.forEach(function (item, index) {
	item.addEventListener("touchstart", function () {
		document.querySelector(".selected").classList.remove("selected")
		item.classList.add("selected")
		slider.style.width = item.offsetWidth / 37.5 + "rem"
		slider.style.transform = `translateX(${(item.offsetLeft - 31.5) / 37.5}rem)`
		completed.style.opacity = index == 2 ? 1 : 0
		document.body.style.paddingTop =
			index == 2 ? 147 / 37.5 + "rem" : 50 / 37.5 + "rem"
		current = index
	})
})

const bottomStyle = document.querySelectorAll(".bottomStyle div a")
bottomStyle.forEach(function (item) {
	item.addEventListener("click", function () {
		document.querySelector(".redSel").classList.remove("redSel")
		item.classList.add("redSel")
	})
})

const toPickedUp = document.querySelector(".toPickedUp")
let LocationData = []

// 重新加载列表
getLocationData()
function getLocationData() {
	LocationData = JSON.parse(localStorage.getItem("deliveryInfo"))
	LocationData.forEach(function (item, index) {
		current == 0 && item.Status == 0
		toPickedUp.innerHTML += toPickedUpListStr(
			item.taskNumber,
			item.actualAddress,
			item.deliveryAddress,
			"提货时间",
			item.pickupTime,
			"提货"
		)
		item.isDelay &&
			(document.querySelectorAll(".toPickedUp .list .titleNum .btn")[
				index
			].style.opacity = 1)
	})
}

// 跳转详情页
toReadTask()
function toReadTask() {
	const toPickedUpList = document.querySelectorAll(".toPickedUp .list")
	toPickedUpList.forEach(function (item, index) {
		item.addEventListener("touchstart", function () {
			location.href = `../module01/readyTask.html?id=${index}`
		})
	})
}

// 列表字符串拼接
function toPickedUpListStr(
	teskNum,
	startAddressStr,
	endAddressStr,
	pickGoodsMsg,
	pickGoodsTime,
	btnText
) {
	return `
		<!-- 单个列表 -->
		<div class="wrapper list">
			<!-- 头部 任务编号 -->
			<div class="titleNum">
				<h3>任务编号：<span id="teskNum">${teskNum}</span></h3>
				<span class="btn">已延迟</span>
			</div>
			<!-- 中部 地址 -->
			<div class="middleAddress">
				<!-- 左侧图标 -->
				<div class="leftImg">
					<p class="startImg">起</p>
					<p class="line">---</p>
					<p class="endImg">止</p>
				</div>
				<!-- 右侧文字 -->
				<div class="rightText">
					<p id="startAddress">
						${startAddressStr}
					</p>
					<p id="endAddress">${endAddressStr}</p>
				</div>
			</div>
			<!-- 底部 提货时间 -->
			<div class="footerDate">
				<div class="time">
					<p>${pickGoodsMsg}</p>
					<span id="pickGoodsTime">${pickGoodsTime}</span>
				</div>
				<a href="javascript:;" class="btn">${btnText}</a>
			</div>
		</div>`
}

// 加载动画并刷新
function load() {
	loading.style.opacity = 0.5
	toPickedUp.innerText = ""
	setTimeout(function () {
		loading.style.opacity = 0
		closeActive()
		getLocationData()
	}, 2000)
}
